<template>
    <div class="btn">创建</div>
    <div id="container"></div>
</template>
<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/Addons.js"
import globalGeoJson from "@/assets/geojson/countries.json"
import * as d3 from "d3"

const projection = d3
    .geoMercator()
    .center([104.0, 37.5])
    .scale(80)
    .translate([0, 0])

const data = reactive({

})
let scene: THREE.Scene
const init3D = (canvasDOM: HTMLDivElement) => {
    scene = new THREE.Scene()
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.set(-10, 20, -20)
    scene.add(camera)



    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight)
    canvasDOM.appendChild(renderer.domElement)

    const axesHelper = new THREE.AxesHelper(500);
    scene.add(axesHelper);
    const controls = new OrbitControls(camera, canvasDOM)
    const animation = () => {
        renderer.render(scene, camera)
        requestAnimationFrame(animation)
    }
    animation()
}

onMounted(() => {
    const canvasDOM: HTMLDivElement = document.getElementById("container")!
    init3D(canvasDOM)
})
</script>
<style scoped >
#container{
    position: absolute;
    z-index: -1;
    top:0;
}

</style>